<template>
  <cjui-page-panel header="Table 表格">
    <template #intro>
      容器边框风格。
    </template>

    <cjui-table
      ref="cjuiTableRef"
      :loading="tableState.loading"
      :columns="columns"
      :data="tableState.data"
      :table-border="true"
      :pagination="tableState">
    </cjui-table>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
// 表格相关
const { tableState, tableMethods } = useTableHook({
  getData: () => {
    // tableState.loading = true
    tableState.total = 100;
    tableState.data = [
      { params1: '列1值', params2: '列1值', params3: '列1值333333333' },
      { params1: '列2值', params2: '列2值', params3: '列2值333333333' },
      { params1: '列3值', params2: '列3值', params3: '列3值333333333' },
    ];
  }
});
tableMethods.getData()
const columns = [
  {
    type: 'index',
    label: '序号',
    width: '100px'
  },
  {
    prop: 'params1',
    label: '列1',
  },
  {
    prop: 'params2',
    label: '列2',
  },
  {
    prop: 'params3',
    label: '列3',
  },
]
</script>
